import React, { PureComponent } from 'react'
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom'
import {actionCreator} from './store'
import { LoginWrapper, LoginBox ,Input, Button } from './style'

class Login extends PureComponent {
  render() {
    let { loginState }  = this.props;
    if (loginState) {
      return <Redirect  to="/"/>
    } else {
      return (
        <LoginWrapper>
          <LoginBox>
            <Input placeholder="账号" ref={(input) => this.account = input }/>
            <Input placeholder="密码" ref={(input) => this.pwd = input}/>
            <Button onClick={() => this.props.login(this.account, this.pwd)}>登录</Button>
          </LoginBox>
        </LoginWrapper>
      )
    }
  }
}

const mapStateToProps = (state) => ({
  loginState: state.getIn(['login', 'login'])
});

const mapDispatchToProps = (dispacth) => ({
  login(a, b) {
    dispacth(actionCreator.login(a.value, b.value))
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);